<template>
    <div id="map"></div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue"
import {Scene} from "@antv/l7";
import {Mapbox} from "@antv/l7-maps"; // GaodeMap：高德1.x；GaodeMapV2：高德2.0 版本

export default defineComponent({
    name: "L7MapWithMapbox.component",
    props: {
        mapOnloadCB: {
            required: true,
            type: Function
        }
    },
    setup(props) {

        let scene = ref<Scene | null>(null)
        onMounted(() => {
            scene.value = new Scene({
                id: "map",
                map: new Mapbox({
                    token: "pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ",
                    center: [106.558315, 29.570494],
                    zoom: 12,   // Mapbox （0-24） 高德 （2-19）
                    pitch: 0,   // 地图倾斜角度
                    mapStyle: "light",  // dark/light/normal/blank 无底图/自定义：amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true
                    minZoom: 10,    // default 0 Mapbox 0-24） 高德 （2-19）
                    maxZoom: 22,    // default 22 Mapbox（0-24） 高德 （2-19）
                    rotateEnable: false,    // 是否允许旋转
                }),
                logoVisible: false
            })

            // 地图加载完成触发
            scene.value.on("loaded", () => {
                props.mapOnloadCB(scene.value)
            })
        })

        return {}
    }
})
</script>

<style scoped>

</style>
